<template>
  <div class="user-add">
    <el-card>
      <div slot="header" class="clearfix">
        <span>添加用户</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="goBack">返回</el-button>
      </div>

      <el-form :model="form" :rules="rules" ref="form" label-width="120px">
        <el-form-item label="用户类型" prop="type">
          <el-select v-model="form.type" placeholder="请选择用户类型" @change="handleTypeChange">
            <el-option label="业务员" :value="2"></el-option>
            <el-option label="区域代理" :value="4"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入用户名称"></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11"></el-input>
        </el-form-item>

        <el-form-item label="身份证号" prop="idNo">
          <el-input v-model="form.idNo" placeholder="请输入身份证号" maxlength="18"></el-input>
        </el-form-item>

        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址"></el-input>
        </el-form-item>

        <el-form-item label="身份证正面" prop="idCardUrl">
          <el-upload
            class="upload-demo"
            action="/agg/file/upload"
            :on-success="handleIdCardSuccess"
            :before-upload="beforeUpload"
            :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
          </el-upload>
          <el-image
            v-if="form.idCardUrl"
            :src="form.idCardUrl"
            style="width: 200px; height: 120px; margin-top: 10px;"
            :preview-src-list="[form.idCardUrl]">
          </el-image>
        </el-form-item>

        <el-form-item label="身份证背面" prop="idCardBackUrl">
          <el-upload
            class="upload-demo"
            action="/agg/file/upload"
            :on-success="handleIdCardBackSuccess"
            :before-upload="beforeUpload"
            :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-image
            v-if="form.idCardBackUrl"
            :src="form.idCardBackUrl"
            style="width: 200px; height: 120px; margin-top: 10px;"
            :preview-src-list="[form.idCardBackUrl]">
          </el-image>
        </el-form-item>

        <el-form-item label="营业执照" prop="certificateUrl" v-if="form.type === 3">
          <el-upload
            class="upload-demo"
            action="/agg/file/upload"
            :on-success="handleCertificateSuccess"
            :before-upload="beforeUpload"
            :show-file-list="false">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
          <el-image
            v-if="form.certificateUrl"
            :src="form.certificateUrl"
            style="width: 200px; height: 120px; margin-top: 10px;"
            :preview-src-list="[form.certificateUrl]">
          </el-image>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
          <el-button @click="goBack">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'UserAdd',
  data() {
    return {
      form: {
        type: null,
        name: '',
        phone: '',
        idNo: '',
        address: '',
        idCardUrl: '',
        idCardBackUrl: '',
        certificateUrl: '',
        hygienicUrl: ''
      },
      rules: {
        type: [
          { required: true, message: '请选择用户类型', trigger: 'change' }
        ],
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        idNo: [
          { required: true, message: '请输入身份证号', trigger: 'blur' },
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/, message: '请输入正确的身份证号', trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入详细地址', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    handleTypeChange(value) {
      // 根据用户类型显示不同的字段
      if (value === 3) {
        // 商家需要营业执照
        this.rules.certificateUrl = [
          { required: true, message: '请上传营业执照', trigger: 'change' }
        ]
      } else {
        delete this.rules.certificateUrl
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleIdCardSuccess(response) {
      if (response.success) {
        this.form.idCardUrl = response.data
        this.$message.success('身份证正面上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
    handleIdCardBackSuccess(response) {
      if (response.success) {
        this.form.idCardBackUrl = response.data
        this.$message.success('身份证背面上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
    handleCertificateSuccess(response) {
      if (response.success) {
        this.form.certificateUrl = response.data
        this.$message.success('营业执照上传成功')
      } else {
        this.$message.error('上传失败')
      }
    },
    handleSubmit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          try {
            // 调用API添加用户
            // await addUser(this.form)
            this.$message.success('用户添加成功')
            this.goBack()
          } catch (error) {
            this.$message.error('添加失败')
          }
        }
      })
    },
    goBack() {
      this.$router.go(-1)
    }
  }
}
</script>

<style scoped>
.user-add {
  padding: 20px;
}

.upload-demo {
  margin-bottom: 10px;
}
</style>
